<template>
	<view>
		<view >

			<uni-datetime-picker :border="false" style="margin-top: 20rpx;" v-model="range" type="daterange"
				@change="changeLog" />
				
			<uni-data-select class="choose-type" placeholder="请选择分类" v-model="patrolType" :localdata="rangeType" @change="query">
			</uni-data-select>

			<view style="margin-top:30rpx">
				<view v-if="abnormalArr.length <= 0">
					<div style="text-align:center;color: #ccc;">
						当前日期没有数据,选择日期查看更多
					</div>
					<!-- <uni-load-more content-text="当前日期没有数据,选择日期查看更多" /> -->
				</view>
				<view v-for="(item,index) in abnormalArr" :key="index" style="margin: 20rpx 0 20rpx;">
					<view  class="row mainContentWrap" @click="abnormalIndexSkip(item)">

						<view style="color: #2934D1;flex:1;text-align: left">
							{{item.patrol.patrolType | showPatrolType}}
						</view>

						<view v-if="item.patrol.patrolType == 1" style="color: #ccc;flex:1;text-align: center">
							{{item.patrol.buildingNo}}{{item.patrol.dormitoryNo}}
						</view>
						<view style="color: #515c6f;flex:1;text-align: center" v-else>
							{{item.patrol.className }}
						</view>

						<view style="color: #ccc;flex:1;text-align: center">
							{{item.handle.chargeTeacherName}}
						</view>
						<view :style="{color: item.handle.handleStatus==0 ?'red':'#ccc'}"
							style="flex:1;text-align: right;">
							{{item.handle.handleStatus | showHandle}}
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="logoSty"></view> -->
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="Attbottoms"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		data() {

			return {
				startDate:'',
				endDate:'',
				patrolType: '',
				rangeType: [{
						value: '',
						text: "全部"
					}, {
						value: "2",
						text: "入校"
					},
					{
						value: "3",
						text: "课堂"
					},
					{
						value: "4",
						text: "午休"
					}, {
						value: "5",
						text: "晚自习"
					}, {
						value: "6",
						text: "课间"
					}, {
						value: "1",
						text: "宿舍"
					},
				],
				range: [],
				userName: '',
				topName: '值班数据',
				id: '',
				abnormalArr: [],
				Attbottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "首页",
						path: '/pages/classManagement/classManagementIndex'
					},

					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "退出",
						path: '/pages/index/login'
					},
				],
			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		filters: {
			showPatrolType(type) {
				// 2:入校入校巡查 3:课堂巡查 4:午休巡查 5:晚自习巡查 6:课间巡查
				if (type == "2") {
					return "入校";
				} else if (type == "3") {
					return "课堂";
				} else if (type == "4") {
					return "午休";
				} else if (type == "5") {
					return "晚自习";
				} else if (type == "6") {
					return "课间";
				} else if (type == "1") {
					return "宿舍";
				}
			},
			showHandle(status) {
				if (status == 0) {
					return '未处理';
				} else if (status == 1) {
					return "已处理";
				}
			}
		},
		onLoad() {


			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			month = month > 0 ? month : '0' + month; //个位数前面补零
			var day = date.getDate() > 0 ? date.getDate() : '0' + date.getDate();
			var str = `${year}-${month}-${day}`;
			this.range = [str, str]

			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})
			uni.getStorage({
				key: "loginId",
				success: (res) => {
					that.id = res.data
				}
			})

			var loginId = uni.getStorageSync("loginId");

			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			month = month < 10 ? "0" + month : month;
			var day = date.getDate();
			day = day < 10 ? "0" + day : day;

			var data = {
				"userId": loginId,
				"startDate": year + '-' + month + "-" + day,
				"endDate": year + '-' + month + "-" + day,
				"patrolType": ""
			}

			this.$api.dormitory.getRecord(data).then(res => {
				console.log(res)
				this.abnormalArr = res.data;
				console.log(this.abnormalArr, 686)
			})
		},
		methods: {
			query(e) {
					var loginId = uni.getStorageSync("loginId");
						
					
					var data = {
						"userId": loginId,
						"startDate":this.startDate,
						"endDate": this.endDate,
						"patrolType":e
					}
					
					this.$api.dormitory.getRecord(data).then(res => {
						console.log(res)
						this.abnormalArr = res.data;
						console.log(this.abnormalArr, 686)
					})
			},
			changeLog(e) {
				var loginId = uni.getStorageSync("loginId");
				this.startDate = e[0];
				this.endDate = e[1];
			
				var data = {
					"userId": loginId,
					"startDate": e[0],
					"endDate": e[1],
					"patrolType": this.patrolType
				}

				this.$api.dormitory.getRecord(data).then(res => {
					console.log(res)
					this.abnormalArr = res.data;
					console.log(this.abnormalArr, 686)
				})
			},
			goPage(url) {

			},
			abnormalIndexSkip(item) {
				// 2:入校入校巡查 3:课堂巡查 4:午休巡查 5:晚自习巡查 6:课间巡查
				var obj = JSON.stringify(item);
				if (item.patrol.patrolType == '3') {
					uni.navigateTo({
						url: '/pages/record/classroomRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (item.patrol.patrolType == '2') {
					uni.navigateTo({
						url: '/pages/record/earlyRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (item.patrol.patrolType == '4') {
					uni.navigateTo({
						url: '/pages/record/middayRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (item.patrol.patrolType == '6') {
					uni.navigateTo({
						url: '/pages/record/breakRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (item.patrol.patrolType == '1') {
					uni.navigateTo({
						url: '/pages/record/dormitoryRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (item.patrol.patrolType == '5') {
					uni.navigateTo({
						url: '/pages/record/nightRecord?obj=' + obj,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		},

	}
</script>

<style lang="scss">
	// .choose-type /deep/ .uniui-clear{
	// 	color: white !important;
	// }
	/deep/ .uni-select {
		border: unset;
		padding: 20rpx 20rpx 0 50rpx;
	}

	.mainContentWrap {
		
		border-bottom: #e9e9ee solid 1rpx;
		height: 70rpx;
		border-radius: 5rpx;
		// margin-top: 10rpx;
		width: 86%;
		margin: 0 auto;
		margin-left: 22rpx;
		// box-shadow: 0upx 0upx 3upx 0upx #8F8F94;
		display: flex;
		justify-content: space-between;
		align-content: space-around;
		align-items: center;

	}

	.row {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 30rpx;
		
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexTeacher2 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 76upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-5.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 30rpx;
		/* opacity: 0.8; */
	}

	.indexTeacher0 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 76upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-6.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 30rpx;
		/* opacity: 0.8; */
	}

	.indexTeacher1 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 76upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-4.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 30rpx;
		/* opacity: 0.8; */
	}
	.indexContent{
		height:100vh
	}
	.indexContent2{
		height: 100vh !important
	}
</style>
